<template>
	<view class="content linear-color">
		<view class="title-view" :style="{'margin-top':magringTopTitle+'px'}">{{title}}</view>
		
		<swiper class="swiper-box" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in loopImg" :key='index'> 
				<view class="swiper-item">
					<image class="swiper-img" :src="item.url" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="notice-box">
			<image class="notice-img" :src="labaImg" mode=""></image>
			<view class="notice-text mian-color">
				变废为宝，需要从我们身边做起！
			</view>
		</view>
		
		<view class="news-content">
			<view class="news-content-title">发起回收</view>
			<image style="display: block;margin: 0 auto;width: 287px;margin-top: 50px;" :src="huishouImg" mode="widthFix"></image>
			<image @click="gotohuishou" style="width: 260px;margin: 0 auto;display: block;margin-top: 15px;" :src="btnImg" mode="widthFix"></image>
		</view>
		<image class="beijing-content" style="margin-top: 0px;" :src="beijing03" mode="widthFix" ></image>
		<view class="news-content" style="margin-top: 0px;">
			<view class="news-content-title">回收要求</view>
			<image style="display: block;margin: 0 auto;margin-top: 30px;" :src="huishouyaoqiu" mode="widthFix"></image>
		</view>
		<image class="beijing-content" :src="beijing03" mode="widthFix" ></image>
		<view class="news-content" style="margin-top: 0px;">
			<view class="news-content-title">我们的承诺</view>
			<image style="display: block;margin: 0 auto;margin-top: 30px;" :src="chennuoImg" mode="widthFix"></image>
		</view>
		<image class="beijing-content" :src="beijing03" mode="widthFix" ></image>
		<view class="content-lianxi" >
			<view class="content-lianxi-top">羽希网络科技提供技术支持</view>
			<view @click="fuzhi_fun" class="content-lianxi-bottom">联系电话/微信：13728737944</view>
		</view>
		<view style="width: 100%;height: 50px;"></view>
		<tab-bar :selectPath='nowPath'></tab-bar>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import tabBar from '../../components/tabBar/tabBar.vue'
	import baseUrl from '../../utils/config.js'
	export default {
		data() {
			return {
				title: '首页',
				mainColor:uni.getStorageSync('mianColor'),
				magringTopTitle:0,
				nowPath:'/'+this.$mp.page.route, //当前路径
				loopImg:[
					{
						url:baseUrl+'/uploads/static/image/recovery_index_banner@2x.png',
					},{
						url:baseUrl+'/uploads/static/image/recovery_index_banner@2x.png',
					}
				],
				labaImg:baseUrl+'/uploads/static/image/recovery_index_notice_icon@2x.png',
				huishouImg:baseUrl+'/uploads/static/image/recovery_index_icon_reserve@2x.png',
				btnImg:baseUrl+'/uploads/static/image/recovery_index_btn_reserve@2x.png',
				huishouyaoqiu:baseUrl+'/uploads/static/image/select01.png',
				chennuoImg:baseUrl+'/uploads/static/image/recovery_index_promise@2x.png',
				
				beijing03:baseUrl+'/uploads/static/image/recovery_index_reserve_bg_03@2x.png',
			}
		},
		onLoad() {
			//计算右上角高度
			 let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			 this.magringTopTitle = menuButtonInfo.top
			 this.getHideSetFun()
		},
		onShareAppMessage(){
			
		},
		methods: {
			gotohuishou(){
				uni.redirectTo({
					url:'/pages/recover/recover'
				})
			},
			getHideSetFun(){
				http.getHideSet().then((res)=>{
					console.log(res)
					uni.setStorageSync('hideSet',res.data.data)
				})
			},
			fuzhi_fun(){
				uni.setClipboardData({
					data: '13728737944',
					success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				});
			}
		},
		components:{
			tabBar
		}
	}
</script>

<style>
	.content{
		width: 100%;
		background: linear-gradient(#C7F2E9 10%, #ffffff 20%);
		overflow: hidden;
	}
	.title-view{
		width: 100%;
		text-align: center;
		height: 35px;
		line-height: 35px;
		color: #333;
		font-weight: bold;
	}
	.swiper-box{
		margin-top: 20px;
		min-height: 160px;
	}
	.swiper-item .swiper-img{
		width: calc(100% - 24px);
		border-radius: 10px;
		display: block;
		margin: 0 auto;
	}
	.notice-box{
		width: calc(100% - 24px);
		height: 35px;
		background: rgba(210,243,236,0.45);
		border-radius: 6px;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		box-sizing: border-box;
		padding: 0 10px;
		margin-top: 15px;
	}
	.notice-img{
		width: 22px;
		height: 22px;
	}
	.notice-text{
		width: calc(100% - 22px);
		box-sizing: border-box;
		padding-left: 10px;
		font-size: 12px;
	}
	.news-content{
		width: calc(100% - 24px);
		margin: 0 auto;
		box-sizing: border-box;
		padding:0px;
		position: relative;
		/* box-shadow: 0px 0px 10px #f2f2f2; */
		/* border-radius: 15px; */
		margin-top: 20px;
	}
	.beijing-content{
		width: 100%;
		margin-top: 10px;
	}
	.news-content-title{
		width: 100%;
		box-sizing: border-box;
		padding-left: 12px;
		font-weight: 500;
		font-family: 'PingFang SC Medium';
		font-size: 17px;
		font-weight: bold;
	}
	.content-lianxi{width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 50px;font-size: 14px;}
	.content-lianxi-top{color: #999;margin-bottom: 8px;}
	.content-lianxi-bottom{color:#1c8cff;}
</style>
